<template>
    <div class="projectManage-box">
        <div class="clearProjectRecord">
            <el-button type="danger" icon="el-icon-delete" @click="showProjectApplyRecords"  round>无效项目申请记录</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="showOverTimeProjectRecords"  round>过期项目记录</el-button>
        </div>
        <div class="search-box">
            <el-input
                style="width:240px"
                placeholder="请输入项目名"
                v-model="selectParam.projectName"
                clearable>
            </el-input>
            &nbsp;&nbsp;
            <el-select v-model="selectParam.projectState" placeholder="审核状态">
                <el-option
                label="无选择"
                value=""
                >
                </el-option>
                <el-option
                v-for="item in projectStateList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            &nbsp;&nbsp;
            <el-button type="primary" icon="el-icon-search" @click="selectProjectList">搜索</el-button>
        </div>
        <div class="project-list-box">
            <el-table
                :data="projectList"
                :default-sort = "{prop: 'createtime', order: ' ascending'}"
                style="width: 100%;text-align: center;">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand" style="margin-left:80px">
                            <el-form-item label="项目标识">
                                <span>{{ props.row.id }}</span>
                            </el-form-item>
                            <el-form-item label="项目名">
                                <span>{{ props.row.projectname }}</span>
                            </el-form-item>
                            <el-form-item label="申请人">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式(QQ)">
                                <span>{{ props.row.code }}</span>
                            </el-form-item>
                            <el-form-item label="团队人数">
                                <span>{{ props.row.number }}</span>
                            </el-form-item>
                            <el-form-item label="项目期限">
                                <span>{{ props.row.duration }}</span>
                            </el-form-item>
                            <el-form-item label="指导老师">
                                <span>{{ props.row.teacherid }}</span>
                            </el-form-item>
                            <el-form-item label="预计经费">
                                <span>{{ props.row.cost }}</span>
                            </el-form-item>
                            <el-form-item label="审核状态">
                                <span :class="props.row.projectstate==='0'?'unormal-text':'normal-text'">{{ getProjectState(props.row.projectstate) }}</span>
                            </el-form-item>
                            <el-form-item label="申请时间">
                                <span>{{ props.row.createtime }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                label="项目名"
                width="180">
                <template slot-scope="scope">
                    <i class="el-icon-document"></i>
                    <span style="margin-left: 10px">{{ scope.row.projectname }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="申请人姓名"
                width="150">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>QQ: {{ scope.row.code }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                    </el-popover>
                </template>
                </el-table-column>
                <el-table-column 
                    label="指导老师"
                    width="150"
                    height="40px">
                <template slot-scope="scope">{{ scope.row.teacherid }}</template>
                </el-table-column>
                <el-table-column 
                    label="申请时间"
                    prop="createtime"
                    width="200"
                    sortable>
                <template slot-scope="scope">{{ scope.row.createtime }}</template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="downloadPageShow(scope.$index, scope.row)">点击下载简介文件</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleCheck(scope.$index, scope.row)"
                    v-show="scope.row.projectstate==='0'">点击审核</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-box">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageParams.currentPage"
                :page-sizes="[8, 16, 24]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="projectListRows"
                >

                </el-pagination>
        </div>
        <el-dialog title="审核项目" :visible.sync="ReviewFormVisible">
            <el-descriptions title="项目信息" :column="2"  border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-info"></i>
                    项目名
                </template>
                {{projectObj.projectname}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    申请人
                </template>
                {{projectObj.name}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-phone-outline"></i>
                    联系方式(QQ)
                </template>
                {{projectObj.code}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-data"></i>
                    团队人数
                </template>
                {{projectObj.number}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    项目期限
                </template>
                {{projectObj.duration}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-data"></i>
                    预计经费
                </template>
                {{projectObj.cost}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    申请时间
                </template>
                {{projectObj.createtime}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-opportunity"></i>
                    审核状态
                </template>
                <span :class="projectObj.projectstate==='0'?'unormal-text':'normal-text'">
                    {{getProjectState(projectObj.projectstate)}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    指导教师
                </template>
                {{projectObj.teacherid}}</el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-collection-tag"></i>
                    项目标识
                </template>
                {{projectObj.id}}</el-descriptions-item>
        </el-descriptions>
        <el-form style="margin-top:20px">
            <el-form-item>
                <el-input clearable v-model="emailObj.passwordCode" placeholder="请输入您QQ邮箱授权码"></el-input>
            </el-form-item>
            <el-form-item>
                <a href="https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256" style="" target="_blank">邮箱授权码获取方式指南</a>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button plain type="danger" @click="refuseProjectApply">拒绝申请</el-button>
            <el-button plain type="primary" @click="acceptProjectApply">通过审核</el-button>
        </div>
        </el-dialog>
        <el-dialog title="文件下载" :visible.sync="downloadVisible">
            <el-table
                :data="projectFileById"
                style="width: 100%">
                <el-table-column
                label="文件名"
                width="180">
                <template slot-scope="scope">
                    <i class="el-icon-tickets"></i>
                    <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="项目名"
                width="180">
                <template slot-scope="scope">
                    <i class="el-icon-tickets"></i>
                    <span style="margin-left: 10px">{{ scope.row.projectName }}</span>
                </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="downLoadFileById(scope.$index, scope.row)">点击下载文件</el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="无效项目申请列表" :visible.sync="invalidProjectVisible">
            <!-- id, projectName, name, code, number, duration, teacherId, cost -->
            <el-table
                :data="invalidProjectApplyList"
                style="width: 100%"
                max-height="250">
                <el-table-column
                fixed
                prop="id"
                label="项目标识"
                width="300">
                </el-table-column>
                <el-table-column
                prop="projectname"
                label="项目名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="name"
                label="申请人"
                width="120">
                </el-table-column>
                <el-table-column
                prop="code"
                label="联系方式"
                width="120">
                </el-table-column>
                <el-table-column
                prop="number"
                label="团队成员"
                width="300">
                </el-table-column>
                <el-table-column
                prop="duration"
                label="项目期限"
                width="120">
                </el-table-column>
                <el-table-column
                prop="teacherid"
                label="指导教师"
                width="120">
                </el-table-column>
                <el-table-column
                prop="cost"
                label="项目经费"
                width="120">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index,invalidProjectApplyList )"
                    type="text"
                    size="small">
                    移除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="过期项目列表" :visible.sync="overTimeProjectVisible">
            <!-- id, projectName, name, code, number, duration, teacherId, cost -->
            <el-table
                :data="overTimeProjectRecordList"
                style="width: 100%"
                max-height="250">
                <el-table-column
                fixed
                prop="id"
                label="项目标识"
                width="300">
                </el-table-column>
                <el-table-column
                prop="projectname"
                label="项目名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="name"
                label="申请人"
                width="120">
                </el-table-column>
                <el-table-column
                prop="code"
                label="联系方式"
                width="120">
                </el-table-column>
                <el-table-column
                prop="number"
                label="团队成员"
                width="300">
                </el-table-column>
                <el-table-column
                prop="duration"
                label="项目期限"
                width="120">
                </el-table-column>
                <el-table-column
                prop="teacherid"
                label="指导教师"
                width="120">
                </el-table-column>
                <el-table-column
                prop="cost"
                label="项目经费"
                width="120">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="deleteRowOverTime(scope.$index, overTimeProjectRecordList)"
                    type="text"
                    size="small">
                    移除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
import AES from '@/util/crypto'
import { mapState } from 'vuex';
export default {
    name:'projectManage',
    data(){
        return{
            overTimeProjectVisible:false,
            invalidProjectVisible:false,
            downloadVisible:false,
            ReviewFormVisible:false,
            selectParam:{
                projectName:'',
                projectState:''
            },
            pageParams:{
                currentPage:1,
                pageSize:8
            },
            projectObj:{
                code:'',
                cost:null,
                createtime:'',
                duration:null,
                id:'',
                name:'',
                number:null,
                projectname:'',
                projectstate:null,
                teacherid:'',
            },
            emailObj:{
                email:JSON.parse(AES.decrypt(sessionStorage.getItem("userObj"))).email,
                passwordCode:''
            },
            fileName:''
        }
    },
    computed:{
        ...mapState('_project',['projectStateList','projectListRows','projectList',
        'projectFileById','invalidProjectApplyList','overTimeProjectRecordList'])
    },
    methods:{
        deleteRow(index, rows) {
            this.$confirm('即将删除项目记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$store.dispatch("_project/deleteProjectMessageById",rows[index]);
                this.invalidProjectVisible=false;                
            this.$message({
                type: 'success',
                message: '正在删除...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });    
        },
        deleteRowOverTime(index,rows){
            this.$confirm('即将删除项目记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$store.dispatch("_project/deleteOverTimeProjectById",rows[index]);
                this.overTimeProjectVisible=false;                
            this.$message({
                type: 'success',
                message: '正在删除...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });  
        },
        getProjectState(stateCode){
            let result='';
            switch(stateCode){
                case '0':
                    result='待审核';
                    break;
                case '1':
                    result='审核通过';
                    break;
                case '-1':
                    result='审核失败';
                    break;
            }
            return result;
        },
        handleSizeChange(val) {
            this.pageParams.pageSize=val;
            //分页查询
            let obj=Object.assign(this.selectParam,this.pageParams);
            this.$store.dispatch("_project/getProjectListByCondition",obj);
            
        },
        handleCurrentChange(val) {
            this.pageParams.currentPage=val;
            //分页查询
            let obj=Object.assign(this.selectParam,this.pageParams);
            this.$store.dispatch("_project/getProjectListByCondition",obj);
            
        },
        handleCheck(index, row) {
            Object.assign(this.projectObj,row)
            this.ReviewFormVisible=true;
        },
        selectProjectList(){
            //查询
            let obj=Object.assign(this.selectParam,this.pageParams);
            this.$store.dispatch("_project/getProjectListByCondition",obj);
        },
        acceptProjectApply(){
            if(this.emailObj.passwordCode===''){
                this.$message({
                    type:'error',
                    message: '请填写邮箱授权码'
                });
                return;   
            }
            this.ReviewFormVisible=false;
            this.$confirm('完成审核并通知项目负责人审核结果, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.projectObj.projectstate='1';
                let obj=Object.assign(this.emailObj,{'projectObj':JSON.stringify(this.projectObj)});
                this.$store.dispatch("_project/ExamineProjectApply",obj)
            this.$message({
                type: 'success',
                message: '正在发送...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消发送'
            });          
            });
        },
        refuseProjectApply(){
            if(this.emailObj.passwordCode===''){
                this.$message({
                    type:'error',
                    message: '请填写邮箱授权码'
                });
                return;   
            }
            this.ReviewFormVisible=false;
            this.$confirm('完成审核并通知项目负责人审核结果, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.projectObj.projectstate='-1';
                let obj=Object.assign(this.emailObj,{'projectObj':JSON.stringify(this.projectObj)});
                this.$store.dispatch("_project/ExamineProjectApply",obj)
            this.$message({
                type: 'success',
                message: '正在发送...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消发送'
            });          
            });
        },
        downLoadFileById(index,row){
            this.fileName=row.fileName;
            this.downLoadFail(row.url);
            this.downloadVisible=false;
        },
        downloadPageShow(index,row){
            this.downloadVisible=true;
            this.$store.commit("_project/getProjectFileById",row.id)
        },
        downLoadFail: function (url) {
            const config = {
                method: 'get',
                url: 'serviceCustomer/api/_project//downloadFileByProject',
                params:{'url':url},
                headers: {
                    'ContentType' : 'application/json'
                },
                responseType: 'blob'
            };
            axios(config).then(response => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', this.fileName);
                document.body.appendChild(link);
                link.click();
            })
        },
        showProjectApplyRecords(){
            this.invalidProjectVisible=true;
            this.$store.dispatch("_project/getInvalidProjectApplyList")
        },
        showOverTimeProjectRecords(){
            this.overTimeProjectVisible=true;
            this.$store.dispatch("_project/getOverTimeProjectRecord")
        }
    },
    mounted(){
        let obj=Object.assign(this.selectParam,this.pageParams);
        this.$store.dispatch("_project/getProjectListByCondition",obj);
        this.$store.dispatch("_project/getProjectFileList")
    }
}
</script>

<style scoped lang="css">
    .projectManage-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .clearProjectRecord{
        position: inherit;
        top: 1%;
        right: 1%;
        width: 29%;
    }
    .search-box{
        margin-top: 2%;
        margin-left: 5%;
        width: 70%;
    }
    .project-list-box{
        position: inherit;
        margin-top: 2%;
        left: 5%;
        width:85%;
        height: 70%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .pagination-box{
        position: inherit;
        top: 90%;
        width: 100%;
        text-align: center;
    }
    .normal-text{
        color: black;
    }
    .unormal-text{
        color: red;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    a{
        text-decoration: none;
    }
</style>